<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
</style>
<template>
  <div class="outstore">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{type == 1 ? '库房调拨入库' : '库存调整入库'}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">编号</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly :value="baseInfo.code" name="">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">货品所属</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="baseInfo.orgname">
            </div>
          </div>
          <div class="weui-cell" v-if="baseInfo.type != 1">
            <div class="weui-cell__hd"><label class="weui-label">调整类型</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly :value="baseInfo.type == 2 ? '出库' : '入库'" name="">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">{{baseInfo.type == 1 ? '调出' : ''}}库房</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly :value="baseInfo.fromsrname">
            </div>
          </div>
          <div class="weui-cell" v-if="baseInfo.type == 1">
            <div class="weui-cell__hd"><label class="weui-label">调入库房</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly :value="baseInfo.tosrname">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly name="" :value="baseInfo.shiftweight">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">申请人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly name="" :value="baseInfo.applyname">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">申请时间</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly type="text" name="" :value="baseInfo.createtime">
            </div>
          </div>
        </div>
        <div class="oitem" v-for="(product, index) in baseInfo.items" :key="product.guid">
          <input type="hidden" :name="'items[' + index + '].applyitemid'" :value="product.guid" />
          <input type="hidden" :name="'items[' + index + '].productguid'" :value="product.productguid" />
          <input type="hidden" :name="'items[' + index + '].spguid'" :value="product.spguid" />
          <!--          <input type="hidden" :name="'items[' + index + '].shrguid'" :value="product.shguid" />-->
          <div class="weui-cells__title">货品明细 {{index + 1}}</div>

          <div class="weui-cell fir">
            <div class="weui-cell__hd"><label class="weui-label">货品类型</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly="true" :value="getTypeName(product.type)">
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly="true" :value="product.product">
            </div>
          </div>
          <div class="weui-cell" v-if="product.type == 2">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly="true" :value="product.spname">
            </div>
          </div>
<!--          <div class="weui-cell fir">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">{{baseInfo.type == 1 ? '调出' : ''}}库间</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="" readonly="true" :value="product.fromshname">-->
<!--            </div>-->
<!--          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" ref="toshname" name="toshname">
              <select class="weui-select house" :name="'items[' + index + '].shrguid'" id="tosh">
                <option value="">请选择</option>
                <option v-for="(item, i) in autoHouses(index)" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" v-if="baseInfo.type == 1" type="number" :readonly="baseInfo.type != 1 ? true : false" :name="'items[' + index + '].weight'" placeholder="请输入重量">
              <input class="weui-input weight" v-if="baseInfo.type != 1" type="number" :readonly="baseInfo.type != 1 ? true : false" :name="'items[' + index + '].weight'" :value="product.shiftweight" placeholder="请输入重量">
<!--              <input class="weui-input weight" type="number" :name="'items[' + index + '].weight'" placeholder="请输入重量">-->
            </div>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
              <div class="weui_uploader_hd weui_cell" style="padding-left: 0;">
                <div class="weui_cell_bd weui_cell_primary" id="outstore">单据上传</div>
                <div class="weui_cell_ft" id=""></div>
              </div>
              <div class="weui_uploader_bd">
                <ul class="weui-uploader_files" id="images">
                  <li class="weui-uploader_file" v-for="(img, index) in images.serverId" :id="img"  @click=del(img) ><img :src="images.srcStr[index]" width="85" /></li>
                </ul>
                <div class="weui_uploader_input_wrp">
                  <input type="button" id="selectImage"  class="weui_uploader_input" >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
    import wx from 'weixin-js-sdk';

    export default {
        name: 'TransferFeedStoreRm',
        data () {
            return {
                openid: localStorage.openid,
                guid: '',
                type: 0,
                baseInfo: {},
                houses: [],
                nodeid: '',
                annex: '',
                toshguid: '',
              images: {
                serverId: [],
                srcStr: [],
              }
            }
        },
        watch: {
        },
        created() {
            window.addEventListener('setItem', ()=> {
                this.openid = localStorage.getItem('openid');
            })
        },
        mounted () {
            let that = this;
           this.guid = this.$route.query.guid;
            this.nodeid = this.$route.query.nodeid;
            this.annex = this.$route.query.annex;
            this.type = this.$route.query.type;
            //获取回显数据
            this.getBaseInfo(this.$route.query.guid, this);
        },
        computed: {
        },
        methods: {
            wxConfig: function(wxParams) {
                wx.config({
                    debug: false,            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: wxParams.appid,    // 必填，公众号的唯一标识
                    timestamp: wxParams.timestamp,  // 必填，生成签名的时间戳
                    nonceStr: wxParams.nonceStr, // 必填，生成签名的随机串
                    signature: wxParams.signature,// 必填，签名
                    jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
                });
            },
          wxUoloadImage: function(that) {
            let cthis = this;
            //wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            document.querySelector('#selectImage').onclick = function () {
              wx.chooseImage({
                success: function (res) {
                  $(function(){
                    $.each( res.localIds, function(i, n){
                      wx.uploadImage({
                        localId: n,
                        isShowProgressTips: 1,
                        success: function (res) {
                          if (that.checkCore() == 'ios') {
                            wx.getLocalImgData({
                              localId: n, // 图片的localID
                              success: function (res2) {
                                cthis.$nextTick(function () {
                                  cthis.images.srcStr.push(res2.localData);
                                })
                              }
                            });
                          } else {
                            cthis.$nextTick(function () {
                              cthis.images.srcStr.push(n);
                            })
                          }

                          cthis.images.serverId.push(res.serverId);
                        },
                        fail: function (res) {
                          $.alert(JSON.stringify(res));
                        }
                      });
                    });
                  });
                }
              });
            };
            //});

          },
          del: function (id){
            let cthis = this;
            $.actions({
              actions: [{
                text: "删除",
                onClick: function() {
                  $.confirm("确定删除?", function() {
                    //点击确认后的回调函数
                    //删掉id
                    var ids = cthis.images.serverId;
                    var a =  ids.indexOf(id);
                    cthis.$nextTick(function () {
                      cthis.images.serverId.splice(a,1);
                      cthis.images.srcStr.splice(a,1);
                    })
                    //$("#"+id).hide();
                  }, function() {
                    //点击取消后的回调函数
                  });
                }
              }
              ]
            });
          },
            checkCore:function() {
                var u = navigator.userAgent;
                //var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;//g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);   //ios终端
                if (isIOS) {
                    return 'ios';
                } else  {
                    return 'android';
                }
            },
          autoHouses: function(no) {
            return this.houses['house' + no];
          },
          getBaseInfo: function(id, that) {
            this.axios({
              method: 'post',
              url: '/produce/Transferapply!getUpImagInfo.action',
              params: {openid: this.openid, applyid: id, url: location.href.split("#")[0]}
            }).then(response => {
              if (response.data.msg == 'success') {
                this.baseInfo = response.data.apply;
                let apply = response.data.apply;
                let items = response.data.apply.items;
                if (items.length != 0) {
                  for (let i=0; i<items.length; i++) {
                    this.$nextTick(function () {
                      //获取库间
                      if (apply.type == 1) {
                        this.getHouses(apply.tosrguid, items[i].type, i);
                      } else {
                        this.getHouses(apply.fromsrguid, items[i].type, i);
                      }
                    })
                  }
                }
                let wxParams = response.data.params;
                //配置微信公众号参数
                this.wxConfig(response.data.params);
                //上传
                this.wxUoloadImage(that);
              } else {
                this.toastError('系统错误');
              }
            });
          },
          getHouses: function(roomid, type, index) {
            this.axios({
              method: 'get',
              url: '/produce/StoreHouse!getHousesByType.action',
              params: {srguid: roomid, type: type}
            }).then((response) => {
              if (response.data.msg == 'success') {
                let data = response.data;
                this.$set(this.houses, 'house' + index, data.houses);
                //this['house' + index] = data.houses;
              } else if (response.data.msg == 'outlogin') {
                this.toastError('请重新登录');
              } else {
                this.toastText("获取库间数据失败");
              }

            })
          },
            send: function() {
              if (!this.checkEmy('weight')) {
                this.toastText('重量不能为空！');
                return false;
              } if (!this.checkEmy('house')) {
                this.toastText('库间不能为空！');
                return false;
              } else if (this.annex.indexOf('whin') > -1 && this.images.serverId.length == 0) {
                    this.toastText('单据不能为空！');
                    return false;
                  }

                    //防止重复提交
                    $('.subbtn').attr("disabled", true).css("pointer-events", "none");
                    let postData = {};
                    postData = this.serialize2Obj($("#formid").serializeArray());
                    postData.applyid = this.guid;
                    postData.nodeid = this.nodeid;
                    postData.imageids = this.images.serverId.join(',');
                    this.axios({
                        method: 'post',
                        url: '/produce/Whinform!transferWhin.action?openid=' + this.openid,
                        //params: $("#formid").serialize()
                        params: postData
                    }).then(response => {
                        //恢复提交按钮可点击
                        $('.subbtn').attr('disabled', false).css("pointer-events", "auto");

                        if (response.data.msg == "success") {
                            this.toastSuccess('操作成功!');
                            this.$router.push({name: 'TransferApplyList', query:{type: this.type}});
                        } else if (response.data.msg == 'outlogin') {
                            this.toastError('请重新登录!');
                        } else if (response.data.msg == 'canotopt') {
                          this.toastError('不允许的操作！');
                        } else if (response.data.msg == 'nospguid') {
                            this.toastError('没有规格!');
                        } else {
                          this.toastError('系统错误!');
                        }
                    }).catch(function (error) {
                        //恢复提交按钮可点击
                        $('.subbtn').attr('disabled', false).css("pointer-events", "auto");
                        this.toastError('系统错误');
                    });
            },
            /**
             * 20200311 添加调拨类型
             * liukx
             * @returns {string}
             */
            getTypeName: function(type) {
                let name = '';
                switch (type) {
                    case 1:
                        name = '原料';
                        break;
                    case 2:
                        name = '成品';
                        break;
                    case 3:
                        name = '次品';
                        break;
                }
                return name;
            },
        }
    }


</script>
